.card-container {
	position: relative;
	user-select: none;
	transition: all 0.2s;
	padding: 10px;
	//margin-right: 20px;

	& + .card-container {
		//margin-right: 20px;
	}

	.project-card-wrapper,
	.card-btns {
		transform: translateY(0);
		transition: all 0.2s;
	}

	// 覆盖 card 组件 hover 状态的默认阴影样式
	.el-card:not(.el-card-no-hovering):hover {
		box-shadow: var(--el-box-shadow-light);
	}

	// 卡片右上角按钮
	.card-btns {
		background: var(--color-white);
		position: absolute;
		top: 0;
		right: -6px;
		border-radius: var(--border-radius);
		box-shadow: var(--el-box-shadow-light);
		padding: 10px;
		display: none;
	}

	&:hover {
		.card-btns {
			display: flex;
		}
	}
}

.pointer.icon-copy {
	&:hover {
		cursor: copy;
	}
}

.project-card-wrapper {
	position: relative;
	//padding: 10px;
	//outline: 1px solid red;

	.el-card {
		// margin: 10px;
		border-radius: var(--border-radius);
		//outline: 1px solid red;
	}

	.el-card__body {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		padding-top: 0.24rem + 0.16rem + 1rem;
		transition: all 0.2s;
		border-radius: var(--border-radius);
		overflow: hidden;

		.ui-logo {
			padding: 16px;
			color: #fff;
			font-size: 96px;
			background-color: var(--app-brand);
			line-height: 1rem;

			&:hover {
				box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024,
					0 4px 18px 3px #0000001f !important;
				cursor: pointer;
			}
		}

		.ui-title {
			margin-top: 10px;
			font-size: 14px;
			font-weight: normal;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&.el-card-hoverable {
		&:hover {
			cursor: unset;
		}
	}

	.project-card-wrapper-body {
		.icon {
			font-size: 0.8rem;
		}

		.name {
			font-size: 0.18rem;
			margin-top: 0.16rem;
		}
	}
}
